<template>
  <div class="example">
    <nav>
      <a href="javascript:void(0);">菜单一</a>
      <a href="javascript:void(0);">菜单二</a>
      <a href="javascript:void(0);">菜单三</a>
      <a href="javascript:void(0);"
        @mouseenter="() => { isShow = true }"
        @mouseleave="() => { isShow = false}"
      >菜单四
        <transition name="fade">
          <ul class="sub-nav" v-show="isShow">
            <li class="sub-item">子菜单一</li>
            <li class="sub-item">子菜单二</li>
            <li class="sub-item">子菜单三</li>
            <li class="sub-item">子菜单四</li>
          </ul>
        </transition>
      </a>
    </nav>
  </div>
</template>

<script>
/**
 * 场景一：PC菜单
 */

export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: all .3s;
}
// 告诉浏览器过渡进入 或者 过渡结束的元素的状态
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.example {
  width: 100%;
  margin: 0;
  padding: 0;
}

nav {
  position: relative;
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  border-radius: 4px;

  a {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    width: 100px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    color: #333;

    &:hover {
      cursor: pointer;
      background-color: #e9e9e9;
    }
  }
}

.sub-nav {
  position: absolute;
  border-bottom: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  width: 150px;

  .sub-item {
    height: 50px;
    width: 100%;
    line-height: 50px;
    font-size: 14px;
    
    &:hover {
      background-color: #e9e9e9;
    }
  }
}
</style>
